<template>
  <el-dialog
    :visible="showDialog"
    :title="!isEditTenant() ? '租户添加' : '租户编辑'"
    width="800px"
    custom-class="modal-form"
    :show-close="false"
    @close="onFormClosed"
  >
    <div
      class="app-container"
    >
      <el-form
        ref="formTenant"
        label-width="120px"
        :model="tenant"
        :rules="tenantRules"
      >
        <el-form-item
          prop="name"
          label="租户名称"
        >
          <el-input
            v-model="tenant.name"
            placeholder="租户名称"
          />
        </el-form-item>
        <el-form-item
          v-if="!isEditTenant()"
          prop="adminEmailAddress"
          label="管理员邮箱"
        >
          <el-input
            v-model="tenant.adminEmailAddress"
            placeholder="管理员邮箱"
          />
        </el-form-item>
        <el-form-item
          v-if="!isEditTenant()"
          prop="adminPassword"
          label="管理员密码"
        >
          <el-input
            v-model="tenant.adminPassword"
            placeholder="管理员密码"
          />
        </el-form-item>

        <el-form-item>
          <el-button
            class="cancel"
            style="width:100px;right: 120px;position: absolute;"
            @click="onCancel"
          >
            取消
          </el-button>
          <el-button
            class="confirm"
            type="primary"
            style="width:100px;right: 10px;position: absolute;"
            @click="onSaveTenant"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import { get, update, create } from '@/api/tenant-management'

export default {
  name: 'TenantCreateOrEditForm',
  components: { },
  props: {
    tenantId: {
      type: String,
      default: ''
    },
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tenant: {
        name: '',
        adminEmailAddress: '',
        adminPassword: ''
      },
      tenantRules: {
        name: [
          { required: true, message: '租户名称必须填写', trigger: 'blur' }
        ],
        adminEmailAddress: [
          { required: true, message: '管理员邮箱必须填写', trigger: 'blur' },
          { type: 'email', message: '请填写正确的邮箱', trigger: 'blur' }
        ],
        adminPassword: [
          { required: true, message: '密码必须填写', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    tenantId() {
      this.handleGetEditTenant()
    }
  },
  created() {
    this.handleGetEditTenant()
  },
  methods: {
    isEditTenant() {
      if (this.tenantId) {
        return true
      }
      return false
    },
    handleGetEditTenant() {
      if (this.showDialog && this.tenantId) {
        get(this.tenantId).then(tenant => {
          this.tenant.name = tenant.name
        })
      } else {
        this.reset()
      }
    },
    onSaveTenant() {
      const frmTenant = this.$refs.formTenant
      frmTenant.validate((valid) => {
        if (valid) {
          if (this.isEditTenant()) {
            update(this.tenantId, this.tenant.name).then(tenant => {
              const message = `更新租户${tenant.name}成功`
              this.$message.success(message)
              this.reset()
              this.$emit('closed', true)
            })
          } else {
            create(this.tenant).then(tenant => {
              const message = `创建租户${tenant.name}成功`
              this.$message.success(message)
              this.reset()
              this.$emit('closed', true)
            })
          }
        }
      })
    },
    onFormClosed() {
      this.$emit('closed', false)
    },
    onCancel() {
      this.reset()
      this.$emit('closed', false)
    },
    reset() {
      this.tenant = {
        name: '',
        adminEmailAddress: '',
        adminPassword: ''
      }
    }
  }
}
</script>
